<template>
	<div class="top" @click="scrollToTop" v-if="showScrollToTop">
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7 font-bold">
			<path stroke-linecap="round" stroke-linejoin="round" d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75" />
		</svg>
	</div>
</template>

<script>
export default {
	data() {
		return {
			//   key: value,
			showScrollToTop: false
		};
	},
	methods: {
		scrollToTop() {
			window.scrollTo({
				top: 0,
				behavior: "smooth"
			});
		},
		handleScroll() {
			this.showScrollToTop = window.scrollY > 200; // 在滚动超过200px时显示回到顶部按钮
		}
	},
	mounted() {
		window.addEventListener("scroll", this.handleScroll);
	},
	beforeDestroy() {
		window.removeEventListener("scroll", this.handleScroll);
	}
};
</script>

<style lang="scss" scoped>
.top {
	@apply w-[50px] h-[50px]  rounded-full flex justify-center items-center duration-300 bg-white text-[#c8bb9b]  cursor-pointer shadow-md hover:shadow-2xl hover:border-[#c8bb9b];
	position: fixed;
	right: 5%;
	bottom: 10%;
	z-index: 9999;
}
</style>
